*{
    margin: 0;
    padding: 0;
}
body{
    background-color: rgba(0,0,0,0.5);
    overflow-x: hidden;
    -webkit-user-select: none;
    -webkit-text-size-adjust: none;
    font-family: Arial, Helvetica, san-serif;
    -webkit-perspective: 800;
    -webkit-transform-style: preserve-3d;
    vertical-align: middle;
}

body > *{
    -webkit-backface-visibility: hidden;
    -webkit-box-sizing: border-box;
    display: none;
    position: absolute;
    left: 0;
    width: 100%;
    -webkit-transform: translate3d(0, 0, 0) rotate(0) scale(1);
    min-height: 420px;
    box-sizing: border-box;
}

body > * img{
    width: 100%;
}

.current{
    display: block;
}

.info-tip{
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    font-size: 13px;
    color: #FFF;
}

.in, .out{
    -webkit-animation-duration: 250ms;
    -webkit-animation-fill-mode: both;
    -webkit-animation-timing-function: ease-in-out;
}
.in{
    z-index: 0;
}
.out{
    z-index: 10;
}

.fade.in{
    -webkit-animation-name: fadeIn;
}
.fade.out{
    -webkit-animation-name: fadeOut;
}

@-webkit-keyframes fadeIn{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@-webkit-keyframes fadeOut{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}

.dissolve.in{
    -webkit-animation-name: dissolveIn;
}
.dissolve.out{
    -webkit-animation-name: dissolveOut;
}

@-webkit-keyframes dissolveIn{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@-webkit-keyframes dissolveOut{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}

.pop.in{
    -webkit-animation-name: popIn;
}

.pop.out{
    -webkit-animation-name: popOut;
}

@-webkit-keyframes popIn{
    0%{
        -webkit-transform: scale(0.2);
        opacity: 0;
    }
    100%{
        -webkit-transform: scale(1);
        opacity: 1;
    }
}
@-webkit-keyframes popOut{
    0%{
        -webkit-transform: scale(1);
        opacity: 1;
    }
    100%{
        -webkit-transform: scale(0.2);
        opacity: 0;
    }
}

.slideleft.in{
    -webkit-animation-name: slideLeftIn;
}
.slideleft.out{
    -webkit-animation-name: slideLeftOut;
}

@-webkit-keyframes slideLeftIn{
    0%{
        -webkit-transform: translateX(100%);
    }
    100%{
        -webkit-transform: translateX(0);
    }
}
@-webkit-keyframes slideLeftOut{
    0%{
        -webkit-transform: translateX(0);
    }
    100%{
        -webkit-transform: translateX(-100%);
    }
}

.slideright.in{
    -webkit-animation-name: slideRightIn;
}
.slideright.out{
    -webkit-animation-name: slideRightOut;
}

@-webkit-keyframes slideRightIn{
    0%{
        -webkit-transform: translateX(-100%);
    }
    100%{
        -webkit-transform: translateX(0);
    }
}
@-webkit-keyframes slideRightOut{
    0%{
        -webkit-transform: translateX(0);
    }
    100%{
        -webkit-transform: translateX(100%);
    }
}

.slideup.in{
    z-index: 10;
    -webkit-animation-name: slideUpIn;
}
.slideup.out{
    z-index: 0;
    -webkit-animation-name: slideUpOut;
}

@-webkit-keyframes slideUpIn{
    0%{
        -webkit-transform: translateY(100%);
    }
    100%{
        -webkit-transform: translateY(0);
    }
}
@-webkit-keyframes slideUpOut{
    0%{
        -webkit-transform: translateY(0);
    }
    100%{
        -webkit-transform: translateY(0);
    }
}

.slidedown.in{
    z-index: 0;
    -webkit-animation-name: slideDownIn;
}
.slidedown.out{
    z-index: 10;
    -webkit-animation-name: slideDownOut;
}

@-webkit-keyframes slideDownIn{
    0%{
        -webkit-transform: translateY(0);
    }
    100%{
        -webkit-transform: translateY(0);
    }
}
@-webkit-keyframes slideDownOut{
    0%{
        -webkit-transform: translateY(0);
    }
    100%{
        -webkit-transform: translateY(100%);
    }
}

.flipleft{
    -webkit-backface-visibility: hidden;
}
.flipleft.in{
    -webkit-animation-name: flipLeftIn;
}
.flipleft.out{
    -webkit-animation-name: flipLeftOut;
}

@-webkit-keyframes flipLeftIn{
    0%{
        -webkit-transform: rotateY(180deg) scale(.8);
    }
    100%{
        -webkit-transform: rotateY(0deg) scale(1);
    }
}
@-webkit-keyframes flipLeftOut{
    0%{
        -webkit-transform: rotateY(0deg) scale(1);
    }
    100%{
        -webkit-transform: rotateY(180deg) scale(.8);
    }
}

.flipright{
    -webkit-backface-visibility: hidden;
}
.flipright.in{
    -webkit-animation-name: flipRightIn;
}
.flipright.out{
    -webkit-animation-name: flipRightOut;
}

@-webkit-keyframes flipRightIn{
    0%{
        -webkit-transform: rotateY(-180deg) scale(.8);
    }
    100%{
        -webkit-transform: rotateY(0deg) scale(1);
    }
}
@-webkit-keyframes flipRightOut{
    0%{
        -webkit-transform: rotateY(0deg) scale(1);
    }
    100%{
        -webkit-transform: rotateY(180deg) scale(.8);
    }
}

.swapright{
    -webkit-animation-duration: .7s;
    -webkit-transform: perspective(800);
    -webkit-animation-timing-function: ease-out;
}
.swapright.in{
    -webkit-animation-name: swapRightIn;
}
.swapright.out{
    -webkit-animation-name: swapRightOut;
}

@-webkit-keyframes swapRightIn{
    0%{
        -webkit-transform: translate3d(0px, 0px, -800px) rotateY(70deg);
        opacity: 0;
    }
    35%{
        -webkit-transform: translate3d(-180px, 0px, -400px) rotateY(20deg);
        opacity: 1;
    }
    100%{
        -webkit-transform: translate3d(0px, 0px, 0px) rotateY(0deg);
    }
}
@-webkit-keyframes swapRightOut{
    0%{
        -webkit-transform: translate3d(0px, 0px, 0px) rotateY(0deg);
        opacity: 1;
    }
    35%{
        -webkit-transform: translate3d(180px, 0px, -400px) rotateY(-20deg);
        opacity: .5;
    }
    100%{
        -webkit-transform: translate3d(0px, 0px, -800px) rotateY(-70deg);
        opacity: 0;
    }
}

.swapleft{
    -webkit-animation-name: .7s;
    -webkit-transform: perspective(800);
    -webkit-animation-timing-function: ease-out;
}
.swapleft.in{
    -webkit-animation-name: swapLeftIn;
}
.swapleft.out{
    -webkit-animation-name: swapLeftOut;
}

@-webkit-keyframes swapLeftIn{
    0%{
        -webkit-transform: translate3d(0px, 0px, -800px) rotateY(-70deg);
        opacity: 0;
    }
    35%{
        -webkit-transform: translate3d(180px, 0px, -400px) rotateY(-20deg);
        opacity: 1;
    }
    100%{
        -webkit-transform: translate3d(0px, 0px, 0px) rotateY(0deg);
        opacity: 1;
    }
}
@-webkit-keyframes swapLeftOut{
    0%{
        -webkit-transform: translate3d(0px, 0px, 0px) rotateY(0deg);
        opacity: 1;
    }
    35%{
        -webkit-transform: translate3d(-180px, 0px, -400px) rotateY(20deg);
        opacity: .5;
    }
    100%{
        -webkit-transform: translate3d(0px, 0px, -800px) rotateY(70deg);
        opacity: 0;
    }
}

.cubeleft{
    -webkit-animation-duration: .55s;
}
.cubeleft.in{
    -webkit-transform-origin: 100% 50%;
    -webkit-animation-name: cubeLeftIn;
}
.cubeleft.out{
    -webkit-transform-origin: 0% 50%;
    -webkit-animation-name: cubeLeftOut;
}

@-webkit-keyframes cubeLeftIn{
    0%{
        -webkit-transform: rotateY(90deg) translateZ(100%) scale(.5);
        opacity: .5;
    }
    100%{
        -webkit-transform: rotateY(00deg) translateZ(0) scale(1);
        opacity: 1;
    }
}
@-webkit-keyframes cubeLeftOut{
    0%{
        -webkit-transform: rotateY(0deg) translateX(0) scale(1);
        opacity: 1;
    }
    100%{
        -webkit-transform: rotateY(-90deg) translateZ(100%) scale(.5);
        opacity: .5;
    }
}

.cuberight{
    -webkit-animation-duration: .55s;
}
.cuberight.in{
    -webkit-transform-origin: 0% 50%;
    -webkit-animation-name: cubeRightIn;
}
.cuberight.out{
    -webkit-transform-origin: 100% 50%;
    -webkit-animation-name: cubeRightOut;
}

@-webkit-keyframes cubeRightIn{
    0%{
        -webkit-transform: rotateY(-90deg) translateZ(100%) scale(.5);
        opacity: .5;
    }
    100%{
        -webkit-transform: rotateY(0deg) translateZ(0) scale(1);
        opacity: 1;
    }
}
@-webkit-keyframes cubeRightOut{
    0%{
        -webkit-transform: rotateY(0deg) translateX(0) scale(1);
        opacity: 1;
    }
    100%{
        -webkit-transform: rotateY(90deg) translateZ(100%) scale(.5);
        opacity: .5;
    }
}